<template>
    <el-sub-menu 
      v-if="item.children?.length" 
      :index="resolvePath(item.path)"
    >
      <template #title>
        <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
        <span>{{ item.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
    </el-sub-menu>
  
    <el-menu-item 
      v-else 
      :index="resolvePath(item.path)"
      @click="handleClickLink(item)"
    >
      <svg-icon v-if="item.meta.icon" :icon-class="item.meta.icon" />
      <template #title>
        {{ item.meta.title }}
      </template>
    </el-menu-item>
</template>

<script setup>
import { isExternal } from '@/utils/validate'
import { resolveRoutePath } from '@/utils/router' // 新增路径处理方法
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  basePath: {  // 新增父级路径参数
    type: String,
    default: ''
  }
})

// 增强路径解析方法
const resolvePath = (routePath) => {
  if (isExternal(routePath)) return routePath
  const fullPath = resolveRoutePath(routePath, props.basePath)
  return fullPath.replace(/\/+/g, '/') // 处理多重斜杠问题
}

// 添加导航错误处理
const handleClickLink = (item) => {
  if (isExternal(item.path)) {
    window.open(item.path)
  } else {
    router.push(resolvePath(item.path))
      .catch(err => {
        if (!err.name.includes('NavigationFailure')) {
          console.error('导航失败:', err)
        }
      })
  }
}
</script>
  